<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>菜菜烩旺堡</title>
    <link rel="icon" th:href="@{images/logo2.png}" type="image/x-icon" >
    <link rel="icon" th:href="@{favicon.ico}" type="image/ico">
    <meta name="keywords" content="菜菜烩旺堡">
    <meta name="description" content="菜菜烩旺堡">
    <meta name="author" content="yinqi">
    <link th:href="@{css/ordering.min.css}" rel="stylesheet">
    <link th:href="@{css/materialdesignicons.min.css}" rel="stylesheet">
    <link th:href="@{css/style.min.css}" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}">
    <!-- Site CSS -->
    <link rel="stylesheet" th:href="@{css/style.css}">
    <!-- Responsive CSS -->
    <link rel="stylesheet" th:href="@{css/responsive.css}">
    <!-- Custom CSS -->
    <link rel="stylesheet" th:href="@{css/custom.css}">
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 12px 16px;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>


<body>
<div class="lyear-layout-web">
    <header class="top-navbar">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container">
                <a class="navbar-brand" th:href="@{index.html}">
                    <img style="width: 60px;" th:src="@{images/logo2.png}" alt="" />
                    <img style=" width: 60px;" th:src="@{images/logo4.png}" alt="" />
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbars-rs-food" aria-controls="navbars-rs-food" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbars-rs-food">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item"><a class="nav-link" th:href="@{/index}">首页</a></li>
                        <li class="nav-item"><a class="nav-link" th:href="@{/shopping}">购物车</a></li>
                        <li class="nav-item"><a class="nav-link" th:href="@{/menu}">菜单</a></li>
                        <li class="nav-item">
                            <div class="dropdown">
								<span class="nav-link">
								你好[[*{session.loginUser.telephoneNumber}]]
								</span>
                                <div class="dropdown-content">
                                    <a  class="nav-link" th:if="${session.loginUser.role}==1" href="/bus/business_index">商家系统</a>
                                    <a class="nav-link" href="/logout">退出登录</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="lyear-layout-container">
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered" id="table">
                                        <thead>
                                        <tr>
                                            <th>订单号</th>
                                            <th>图片</th>
                                            <th>菜名</th>
                                            <th>单价</th>
                                            <th>数量</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody th:each="order:${orderList}">
                                        <tr>
                                            <td th:text = "${order.sysOrderId}" name="sysOrderId">
                                            </td>
                                            <td>
                                                <img th:src="${order.dish.img}" width="200px" height="110px">
                                            </td>
                                            <td th:text="${order.dish.dishName}">薯条</td>
                                            <td th:text="${order.dish.price}">单价</td>
                                            <td >
                                                <div id="app">
                                                    <div class="count-num">
                                                        <button onclick="reduce()">-</button>
                                                        <span th:text="${order.sysOrderId}" id="sysOrderId" hidden>{{num}}</span>
                                                        <span th:text="${order.numberOfDiners}" id="numberOfDiners">{{num}}</span>
                                                        <button onclick="add()" th:href="@{'/addNumber?dishCartId='+${order.sysOrderId}}">+</button>
                                                    </div>
                                                </div>
                                            </td>
                                            <td >
                                                <div th:if="${order.state}==0" id="oState">未支付</div>
                                                <div th:if="${order.state}==1">已支付</div>
                                           </td>
                                            <td>
                                                <div class="toolbar-btn-action">
                                                    <a class="btn btn-danger" th:href="@{'deleteOrder?dishId='+${order.dish.dishId}}"></i> 删除</a>
                                                    <a th:href="@{'loadOrder?sysOrderId='+${order.sysOrderId}}" th:if="${order.state}==0" class="btn btn-primary m-r-5" > 支付</a>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" th:src="@{js/ordering.jquery.min.js}"></script>
<script type="text/javascript" th:src="@{js/ordering.bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{js/perfect-scrollbar.min.js}"></script>
<script type="text/javascript" th:src="@{js/main.min.js}"></script>
<script type="text/javascript">
    $(function(){
        $('.search-bar .dropdown-menu a').click(function() {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });
    });
</script>
<script>
    function getState(){
        var arr = [];
        $("table tbody tr").each(function () {
            var res = $(this).find("td").eq(0).text();
            arr.push(res);
        })
        alert(arr);
        // var oState = $("oState").val;
        // $.post("loadOrder",{
        //     oState
        // },function (date) {
        //     alert("支付成功");
        //     window.location.href = "/ordering";
        // })
    }

</script>
    <script>
        function add(){
        var numberOfDiners = document.getElementById("numberOfDiners").innerHTML;
        var sysOrderId = document.getElementById("sysOrderId").innerHTML;
        if (numberOfDiners>0 && numberOfDiners<10){
            numberOfDiners++;
    }
        $.post("/addorderNumber",{
            numberOfDiners,sysOrderId
    },function (date) {
        // alert(date.msg)
        if (date.res == "ok") {
        self.location.href = "/ordering"
    }
    })
    }
        function reduce(){
        var numberOfDiners = document.getElementById("numberOfDiners").innerHTML;
        var sysOrderId = document.getElementById("sysOrderId").innerHTML;
        if (numberOfDiners>1){
            numberOfDiners--;
    }else {
        alert("该菜品不能减少了唷~");
    }
        $.post("/reduceorderNumber",{
            numberOfDiners,sysOrderId
    },function (date) {
        // alert(date.msg)
        if (date.res == "ok") {
        window.location.href = "/ordering"
    }
    })
    }
</script>
</body>
</html>